 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link th:href="@{/static/L-img/font_2608475_frsgtjufoku/iconfont.css}" rel="stylesheet" type="text/css">
     <link  th:href="@{/static/L-css/L-lyric.css}" href="../../L-css/L-lyric.css" rel="stylesheet" type="text/css">
     <link th:href="@{/static/L-img/font_2533053_iojhpwhxp0b/iconfont.css}"  rel="stylesheet" type="text/css">
     <link th:href="@{/static/L-img/font_2550907_osj83i90mhl/iconfont.css}"  rel="stylesheet" type="text/css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">
     <title>歌词页面</title>
 </head>
 <body>

     <div th:each="music:${Musics}">
         <audio th:src="@{${music.mcLoad}}" src="../../L-img/陈聪聪%20-%20最亲的人（翻自%20陆海涛）.mp3" preload="" id="audio"  onended="myEndFunction()"></audio>
     </div>

    <div class="whole">
        <div class="allBack"></div>
        <div class="all">

            <!-- 头部 -->
            <div class="header">
                <div class="kMusic">
                    <img th:src="@{/static/L-img/L-image/future1.jpg}"/>
                </div>
                <ul class="manya">
                    <li><a th:href="@{/}">发现音乐</a></li>
                    <li><a class="vipBtn">VIP会员</a></li>
                    <li><a class="myMusic">我的音乐</a></li>
                    <li class="moreHerd" onmouseover="showMore()" onmouseout="offMore()">
                        更多
                        <img  id="img1" th:src="@{/static/L-img/L-image/L-down.png}"/>
                        <div class="hideMore" onmouseover="showMore()" onmouseout="offMore()">
                            <ul class="hideMusic">
                                <li><a th:href="@{/music/queryAllSinger}">歌手</a></li>
                                <li><a th:href="@{/music/allMusic}">歌单</a></li>
                                <li><a th:href="@{/toMvpaper}">MV</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <!-- 搜索和登录注册 -->
                <div class="right">
                    <div class="headCenter">
                        <div class="headCenterSearch">
                            <form th:action="@{/music/queryByNameMusic}" method="get" class="seekForm" id="seekGoodsForm">
                                <input id="goSearch" autocomplete="off" type="text" name="queryMusicName" placeholder="搜索歌手/歌单/MV/歌词" />
                                <input type="submit" id="actSearch" value="搜索"/>
                            </form>
                        </div>
                    </div>
                    <div class="login">
                        <a th:href="@{/loginpage}">登录</a>
                    </div>
                    <div class="persons" >
                        <span>欢迎</span>
                        <block th:if="${session.USER}!=null">
                            <span class="userName" th:text="${session.USER.userName}">用户名</span>
                        </block>
                        <span class="out">退出登录</span>
                    </div>
                </div>
            </div>
            <!-- 页面中间那部分 -->
            
            <div class="middle">
                <!-- 歌词整个页面的的左边一部分(专辑图片和下载) -->
                <div class="left-lyric">
                    <!-- 专辑图片 -->
                    <div class="image" th:each="music:${Musics}">
                         <img th:src="${music.albImgload}">
                    </div>
                    <!-- 下载这首歌 -->
                    <div class="loadDown" th:each="music:${Musics}">
                        <a th:href="@{/music/addMusicToDownlist(mcName=${music.mcName},mcLoaddele=${music.mcLoaddele}) }">
                          <i  class="iconfont icon-xiazai"></i>
                            下载这首歌
                        </a>
                    </div>
                </div>
                <!-- 右边部分(歌曲名字。歌词) -->
                <div class="right-lyric">
                    <!-- 歌曲信息 -->
                    <div class="div-title" th:each="music:${Musics}">
                        <!-- 歌曲的名字 -->
                        <h1 th:text="${music.mcName}">最亲的人</h1>
<!--                        <h1>最亲的人</h1>-->
                        <div class="singer">
                            <p>歌手:
                                <span th:text="${music.userName}"></span>
                            </p>
                        </div>
<!--                        <div id="lrcStr" th:text="${music.mcLrc}"></div>-->
                        <div style="display: none" id="lrcStr" th:text="${music.mcLrc}"></div>
                    </div>
                    <div class="hide-lyric">
                        <div class="lyric-container">
                        </div>
                    </div>
                </div>
            </div>
        <!-- 底部的播放器 -->
           <!-- <div class="bottom"></div> -->
            <!-- <div class="audio-module" id="audioModule"> -->
            <div class="playControl" >
                <div class="playControl-in">
                    <div class="control-out">
                        <div class="player-module">
                            <!-- 左边的那部分：上一首，下一首，开始暂停 -->
                            <div class="controls-left" th:each="music,loopStatus:${Musics}">
<!--                                th:href="@{/music/queryByIdAlbmusic(mcId=${music.mcId}-1)}"-->
                                <a class="iconfont icon-shangyishou" id="pre" th:href="@{/music/queryup(mcId=${music.mcId})}"></a>
                                <a class="iconfont icon-kaishi" id="toggle" onclick="setPlay()"></a>
                                <a class="iconfont icon-shangyishou" id="next" th:href="@{/music/querydown(mcId=${music.mcId})}"></a>
                            </div>

                            <!-- 模块中间部分 -->
                            <div class="controls-middle">
                                <!-- 专辑封面 -->
                                <div class="bar-alBumImg" th:each="music:${Musics}">
                                    <img th:src="${music.albImgload}">
                                </div>
                                <!-- 专辑封面的右边 -->
                                <div class="alBumImg-right">
                                    <div class="controls_bar">
                                        <!-- 上半部分，歌曲信息 -->
                                        <span class="controls-songName" title="" th:each="music:${Musics}">
                                            <span class="songName" id="songName" th:text="${music.userName}">芜湖音乐</span>
                                        </span>
                                        <!-- 时长 -->
                                        <span class="coding-duration">
                                            <span class="duration ie8" id="duration" th:each="music:${Musics}">
                                                <i class="change-time">00:00</i> / <i class="all-time" th:text="${music.mcTime}">0:00</i>
                                            </span>
                                        </span>
                                    </div>
                                    <!-- 模块中间下半部分，播放的控制条 -->
                                    <div class="progress-bottom">
                                        <!-- 播放进度背景 -->
                                        <div class="bg" id="progress_bg">
                                            <span class="icon icon-playbar-bgleft" id="bg_left"></span>
                                            <span class="bg-middle barBG" id="bg_middle"></span>
                                            <span class="icon icon-playbar-bgright" id="bg_right"></span>
                                        </div>
<!--                                        播放进度 end-->
                                        <!-- 播放进度条（自适应） -->
                                        <div class="progress-bar" id="progress_bar">
                                            <div class="progress-middle" id="progress_middle">
                                                <span class="progress barProgress" id="progress"></span>
                                            </div>
                                            <div class="bar" id="bar">
                                                <span class="iconfont icon-yuandian"></span>
                                            </div>
                                        </div>
<!--                                        播放进度条 end-->
                                    </div>

                                </div>
                            </div>
                            <!-- 模块右边的那部分 -->
                            <div class="controls-right">
                                <!-- 音量 -->
                                <div class="voice">
                                    <i class="iconfont icon-shengyin-01"></i>
                                    <div id="volume-bar">
                                        <div id="box"></div>
                                    </div>
<!--                                    <input type="range"/>-->
                                    <p class="planRate">0%</p>
                                </div>
                                <!--音量 end-->
                            <!-- 我的歌单 -->
                                <div class="play-way">
                                    <span class="add">
                                        <img th:src="@{/static/L-img/L-image/add.png}"/>
                                    </span>
                                    <!-- 点击添加按钮，会将所有歌曲遍历一遍，点击之后会添加到我的歌单里面-->
                                    <div class="addSongs">
                                        <div class="cancelList">X</div>
                                        <ul class="addNew">
                                            <li>不易</li>
                                            <li>朋友</li>
                                            <li>想飞的更高</li>
                                            <li>不知道</li>
                                            <li>加油吧</li>
                                            <li>哈哈哈</li>
                                            <li>中转站</li>
                                            <li>发热体</li>
                                            <li>发热体</li>
                                            <li>发热体</li>
                                            <li>发热体</li>
                                            <li>发热体</li>
                                            <li>发热体</li>

                                        </ul>
                                    </div>
                                    <!--     点击添加按钮，会将所有歌曲遍历一遍，点击之后会添加到我的歌单里面 end-->
                                </div>

                                <!-- 喜欢 -->
                                <div class="prefer" onclick="clk()" th:each="music:${Musics}" th:value="${isLike}">
                                    <span  class="loveCollect" th:value="${music.mcName}"><i class="iconfont icon-xihuan"></i></span>
                                    <img class="loveImg" th:src="@{/static/L-img/L-image/collect.png}"/>
                                </div>
                                <!-- 下载 -->
                                <div class="download" th:each="music:${Musics}">
                                    <a th:href="@{/music/addMusicToDownlist(mcName=${music.mcName},mcLoaddele=${music.mcLoaddele}) }"><i class="iconfont icon-xiazai"></i></a>
                                </div>
<!--                                评论-->
                                <div class="discuss" th:each="music,loopStatus:${Musics}">
                                    <a  th:href="@{/music/musicDis(mcId=${music.mcId})}">
                                        <img th:src="@{/static/L-img/L-image/pinglun.png}"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- </div> -->
            </div>


        </div>
    </div>
     <!--    退出登录的代码-->
     <div class="hideLogOut">
         <div class="hideLogOutContent">
             <h2 class="chooseLogOut">是否退出登录</h2>
             <div class="logOutBtn" >
                 <button class="logOutNoBtn">取 消</button>
                     <button class="logOutYesBtn" th:href="@{/out}">确 认</button>
             </div>
         </div>
     </div>
<!--     收藏成功的弹窗 -->
 <div class="hideSuccess">
     <div class="hideSuccessCollect">
         <div class="collectImg">
             <img th:src="@{/static/L-img/L-image/success.png}"/>
             <p class="character">收藏成功!</p>
         </div>

     </div>
 </div>
<!-- 收藏成功的弹窗 end-->
<!-- 取消收藏的弹窗-->
     <div class="hideCancel">
         <div class="hideCancelCollect">
             <div class="collectImg">
                 <img th:src="@{/static/L-img/L-image/success.png}"/>
                 <p class="character">取消收藏成功!</p>
             </div>

         </div>
     </div>
<!-- 取消收藏的弹窗 end-->
     <!--没有登录会弹出一个提示的弹窗-->
     <div class="hideVipLoad">
         <div class="hideVipLoadForm">
             <div class="hideVipTop">
                 <h5>提示</h5>
                 <button class="closeVip"><span>x</span></button>
             </div>
             <div class="popub">
                 <div class="popub-inner">
                     <div class="popub-img">
                         <img th:src="@{/static/L-img/L-image/point.png}"/>
                     </div>
                     <p class="popub-desc">你还没有登录，请先登录!</p>
                 </div>
             </div>
             <div class="hideFormBottom">
                 <button class="loadBtn">登录</button>
             </div>
         </div>

     </div>

 </body>
 <script th:src="@{/static/L-js/L-lyric.js}"></script>
 <script th:src="@{/static/L-js/jquery-1.12.4.min.js}"></script>
<!-- <script type="text/javascript" th:src="@{https://www.huangwx.cn/js/sweetalert-dev.js}"></script>-->
 <script th:inline="javascript">
     // console.log(Musics.length);
 </script>
 </html>